import React from 'react';
import { useState, useEffect } from 'react'
import type { FC } from 'react';
import './home.css'
import { Swiper, Image, Toast } from 'antd-mobile'
import HomeHeader from '../../compontent/header'
import { useNavigate } from 'react-router-dom'
import request from '../../api/axios'
import homeKnowOne from '../../../public/Image/common_diseases.png'
import homeKnowTwo from '../../../public/Image/common_medicines.png'
import assessment from '../../../public/Image/health_assessment.png'
import video from '../../../public/Icon/video_n.png'
import home from '../../../public/Icon/home_s.png'
import patient from '../../../public/Icon/patient_support_group_list.png'
import { formatTimeAgo } from '../../utils/timeFormat'
import { useAppSelector } from '../../store/hooks';
import Plant from '../../../public/Icon/plan.png'
import finance from '../../../public/Icon/finance.png'
const Index: FC = ({ }) => {
    const [consultation, setConsultation] = useState<any[]>([]);
    const [consultationId, setConsultationId] = useState<any[]>([]);
    const [images, setImages] = useState<any[]>([]);
    const { users } = useAppSelector((state) => state.userList);
    const navigate = useNavigate()
    // const [searchParams] = useSearchParams()
    const [department, setDepartment] = useState<any[]>([]);
    const [consultationContent, setConsultationContent] = useState<any[]>([]);
    const getData = async () => {
        const data = await request.get("/api/health/share/v1/bannersShow")
        const departmentData = await request.get("/api/health/share/knowledgeBase/v1/findDepartment")
        const consultationData = await request.get("/api/health/share/information/v1/findInformationPlateList")
        setImages(data?.data?.result || [])
        setDepartment(departmentData?.data?.result || [])
        setConsultation(consultationData?.data?.result || [])
        setConsultationId(consultationData?.data?.result[0]?.id || [])
    }
    useEffect(() => {
        getData()
    }, []);
    const getConsultationContent = async () => {
        const data = await request.get(`/api/health/share/information/v1/findInformationList?plateId=${consultationId}&page=1&count=20`)
        setConsultationContent(data?.data?.result || [])

    }
    useEffect(() => {
        getConsultationContent()
    }, [consultationId])
    const onPlan = () => {
        let userMy: any = JSON.parse(localStorage.getItem('user') || '{}')
        let items = users.find(item => item.email === userMy?.email)

        if (items?.isAdmin) {
            navigate('/plan')
        } else {
            Toast.show({
                content: '您没有权限访问该页面！',

            })
        }
    }
    return (
        <div className="home">
            <header className="home-header">
                <HomeHeader></HomeHeader>
            </header>
            <div className="home-main">
                <div className="home-main-swiper">
                    <Swiper autoplay loop>
                        {images.map(item => (
                            <Swiper.Item key={item}>
                                <Image width={"100%"} height={200} src={item.imageUrl}></Image>
                            </Swiper.Item>
                        ))}
                    </Swiper>
                </div>
                <div className="home-main-title">
                    &emsp;知识宝典
                </div>
                <div className="home-main-know">
                    <div onClick={() => navigate('/conmon?id=1')}>
                        <div style={{ height: "30px", lineHeight: "30px" }}>
                            常见病症
                        </div>
                        <div>
                            <Image src={homeKnowOne} width={"100%"} height={220}></Image>
                        </div>
                    </div>
                    <div onClick={() => navigate('/conmon?id=2')}>
                        <div style={{ height: "30px", lineHeight: "30px" }}>
                            常用药品
                        </div>
                        <div>
                            <Image src={homeKnowTwo} width={"100%"} height={220}></Image>
                        </div>
                    </div>
                </div>

                <div className="home-main-one">
                    <div className="outpatient-registration-btn" onClick={() => onPlan()}>
                        <div className="btn-icon">
                            <Image src={Plant} width={24} height={24}></Image>
                        </div>
                        <div className="btn-text">
                            <div className="btn-title">门诊挂号</div>
                            <div className="btn-subtitle">便捷预约挂号</div>
                        </div>
                    </div>
                    <div className="outpatient-payment-btn" onClick={() => navigate('/finance')}>
                        <div className="btn-icon">
                            <Image src={finance} width={24} height={24}></Image>
                        </div>
                        <div className="btn-text">
                            <div className="btn-title">在线咨询</div>
                            <div className="btn-subtitle">在线客服咨询</div>
                        </div>
                    </div>
                </div>
                <div className="home-consultation">
                    &emsp;问诊咨询
                </div>
                <div className="home-department">
                    {
                        department.map((item, index) => {
                            return <div key={index} onClick={() => navigate(`/allScience?dept=${encodeURIComponent(item.departmentName)}`)}>
                                <div style={{ width: "100%", margin: "auto", textAlign: "center" }}><Image src={item.pic} width={70} height={70}></Image></div>
                                <div>{item.departmentName}</div>
                            </div>
                        })
                    }
                </div>
                <div className="home-assessment">
                    &emsp;健康测评
                </div>
                <div className="home-assessment-img">
                    <Image src={assessment} width={"100%"} height={"150px"}></Image>
                </div>
                <div className="home-consultation">
                    &emsp;健康咨询
                </div>
                <div className="home-consultation-tabs">
                    {
                        consultation.map((item, index) => {
                            return (
                                <div
                                    key={index}
                                    className={`consultation-tab`}
                                    style={{ color: `${consultationId === item.id ? '#1890ff' : '#666'}` }}
                                    onClick={() => setConsultationId(item.id)}
                                >
                                    {item.name}
                                </div>
                            )
                        })
                    }
                </div>
                <div className="home-consultation-content">
                    {consultationContent.map((item, index) => {
                        const thumbnails = item.thumbnail ? item.thumbnail.split(';') : [];
                        const isThreeImages = thumbnails.length === 3;
                        const isSingleImage = thumbnails.length === 1;

                        return (
                            <div key={index} className="consultation-item" onClick={() => navigate(`/consultationDetail?id=${item.id}`)}>
                                {isSingleImage && (
                                    <div className="consultation-item-single">
                                        <div className="consultation-item-image">
                                            <Image src={thumbnails[0]} width={120} height={80} />
                                        </div>
                                        <div className="consultation-item-content">
                                            <div className="consultation-item-title">{item.title}</div>
                                            <div className="consultation-item-author">{item.source}</div>
                                            <div className="consultation-item-time">{formatTimeAgo(item.releaseTime)}</div>
                                        </div>
                                    </div>
                                )}

                                {isThreeImages && (
                                    <div className="consultation-item-triple">
                                        <div className="consultation-item-title">{item.title}</div>
                                        <div className="consultation-item-images">
                                            {thumbnails.map((img: string, imgIndex: number) => (
                                                <Image key={imgIndex} src={img} width={80} height={80} />
                                            ))}
                                        </div>
                                        <div className="consultation-item-meta">
                                            <div className="consultation-item-author">{item.source}</div>
                                            <div className="consultation-item-time">{formatTimeAgo(item.releaseTime)}</div>
                                        </div>
                                    </div>
                                )}

                                {!isSingleImage && !isThreeImages && (
                                    <div className="consultation-item-no-image">
                                        <div className="consultation-item-title">{item.title}</div>
                                        <div className="consultation-item-meta">
                                            <div className="consultation-item-author">{item.source}</div>
                                            <div className="consultation-item-time">{formatTimeAgo(item.releaseTime)}</div>
                                        </div>
                                    </div>
                                )}
                            </div>
                        );
                    })}
                </div>
            </div>
            <footer className="home-footer">
                <div className="tab" onClick={() => navigate('/')}>
                    <div className="tab-icon" style={{ textAlign: "center" }}><Image src={home} width={24} height={24}></Image></div>
                    <div className="tab-label">首页</div>
                </div>
                <div className="center-btn" onClick={() => navigate('/patient')}>
                    <div className="center-inner"><Image src={patient}></Image></div>
                </div>
                <div className="tab" onClick={() => navigate('/video')}>
                    <div className="tab-icon" style={{ textAlign: "center" }}><Image src={video} width={24} height={24}></Image></div>
                    <div className="tab-label">视频</div>
                </div>
            </footer>
        </div>
    );
};

export default Index;